<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="../../../public/stylesheets/style.css">
    <link rel="stylesheet" type="text/css" href="../../../public/stylesheets/bootstrap.css">
    <script type="text/javascript" src="../../../public/javascripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../../public/javascripts/bootstrap.js"></script>


    <style>
        ._label-color{
            color:white; text-decoration:none;font-weight:bold;}
        .table-div .caption {
            font-size: 30px;

        }
        .table-div {

            margin: 40px;
        }
        .input-costom{

            width: 130px;
        ;
        }
    </style>

    <script type="text/javascript" >
        $(document).ready(function(){
            $("#top").load("../top.html");
            $("#left").load("../left.html");
        });
    </script>
</head>
<body background="../images/whiteBg.png" >
<div id="top"></div>
<div class="container-fluid" style="margin-top: 20px;">
    <div class="row">
        <div class="col-md-1">
        </div>
        <div id="left" class="col-md-2">

        </div>
        <div class="col-md-8 bodyDiv" id="right">

            <div class="table-div">
                <span class="caption" style="font-family: 'Arial Negreta', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 32px;
    color: #333333;
    text-align: left;
    line-height: normal;
    width: 50px;
    padding-left: 15px;">活动列表</span>
                <div class="row">
                    <div class="col-md-6"></div>
                    <div class="col-md-2">

                        <div class="dropdown">
                            <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
                                    data-toggle="dropdown">
                                选择查找
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#">活动主题</a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#">开始时间</a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#">
                                        限制人数
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="#">活动地点</a>
                                </li>
                            </ul>
                        </div>

                    </div>

                    <div class="col-md-2  input-costom " >
                        <input type="text" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-default">搜索</button>
                    </div>
                </div>
                <table class="table table-striped">

                    <thead>
                    <tr>
                        <th>活动主题</th>
                        <th>开始时间</th>
                        <th>限制人数</th>
                        <th>活动地点</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>篮球</td>
                        <td>2015.02.30</td>
                        <td>10</td>
                        <td>篮球馆</td>
                        <td><span class="label label-info"><a href="activityDetail.html"class="_label-color">查看详情</a></span>
                            <span class="label label-danger" ><a href="#"class="_label-color"> 删除</a></span></span>
                        </td>
                    </tr>
                    <tr>
                        <td>足球</td>
                        <td>2015.01.30</td>
                        <td>10</td>
                        <td>操场</td>
                        <td><span class="label label-info"><a href="#"class="_label-color">查看详情</a></span>
                            <span class="label label-danger" ><a href="#"class="_label-color"> 删除</a></span></td>
                    </tr>
                    <tr>
                        <td>郊游</td>
                        <td>2014.02.30</td>
                        <td>10</td>
                        <td>公园</td>
                        <td><span class="label label-info"><a href="#"class="_label-color">查看详情</a></span>
                            <span class="label label-danger" ><a href="#"class="_label-color"> 删除</a></span></td>
                    </tr>
                    <tr>
                        <td>篮球</td>
                        <td>2015.02.30</td>
                        <td>10</td>
                        <td>篮球馆</td>
                        <td><span class="label label-info"><a href="#"class="_label-color">查看详情</a></span>
                            <span class="label label-danger" ><a href="#"class="_label-color"> 删除</a></span></td>
                    </tr>



                    </tbody>

                </table>

            </div>
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-6">
                    <ul class="pagination">
                        <li><a href="#">&laquo;</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">&raquo;</a></li>
                    </ul>
                </div>

            </div>

        </div>

    </div>
</div>
</div>
<div id="bottom"></div>
</body>
</html>